<template>
  <div>
    <!-- 首页 公司介绍 -->
    <div class="topName">
      <div style="display: flex; align-items: center">
        <img
          style="width: 20px; height: 18px; margin: 0 10px"
          src="../../../assets/img/3.png"
          alt=""
          :isCollapse="true"
        />
        <el-button type="primary">首页</el-button>
      </div>
    </div>

    <div class="introduce">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        :size="formSize"
        status-icon
        class="home"
      >
        <el-form-item label="Banner" prop="name">
          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <img
              src="../../../assets//img/35.png"
              style="width: 70px; height: 52px"
              alt=""
            />

            <template #file="{ file }">
              <div>
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <el-icon><zoom-in /></el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <el-icon><Download /></el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <el-icon><Delete /></el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
          <!-- 描述 -->
          <div>
            <div class="ml10">
              图片尺寸1920*600，大小不得超过2MB，最多可上传5张
            </div>
            <div class="ml10">
              注：请勿上传营业执照、证书或身份证等证件照作为首页Banner，否则将会被删除
            </div>
          </div>

          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </el-form-item>

        <el-form-item label="公司图片" prop="name">
          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <img
              src="../../../assets//img/35.png"
              style="width: 70px; height: 52px"
              alt=""
            />

            <template #file="{ file }">
              <div>
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <el-icon><zoom-in /></el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <el-icon><Download /></el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <el-icon><Delete /></el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>

          <div>
            <div class="ml10">
              图片尺寸1920*600，大小不得超过2MB，最多可上传5张
            </div>
            <div class="ml10">
              注：请勿上传营业执照、证书或身份证等证件照作为公司图片，否则将会被删除
            </div>
          </div>

          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </el-form-item>

        <el-form-item label="是否隐藏">
          <el-switch
            v-model="value2"
            class="ml-2"
            style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            "
          />
        </el-form-item>

        <el-form-item label="公司简介">
          <el-input
            v-model="textarea"
            :rows="2"
            type="textarea"
            placeholder="请填写公司简介"
          />
        </el-form-item>

        <el-form-item>
          <div class="text">
            <div>
              1.
              请用中文填写贵公司的公司概况、主营产品、品牌、服务等内容（20-1200字）
            </div>
            <div>2. 如果仅填写单纯的产品介绍，将有可能无法通过审核</div>
            <div>3.规范、详细的介绍更易使买家产生信任感，请您仔细填写</div>
          </div>
        </el-form-item>

        <div class="footer">
          <el-form-item>
            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
              提交
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import top from "../../../components/top/top.vue";
import type { FormInstance, FormRules } from "element-plus";
import "../../../assets/css/size.css";
const formSize = ref("default");
interface RuleForm {
  name: string;
  region: string;
  count: string;
  date1: string;
  date2: string;
  delivery: boolean;
  type: string[];
  resource: string;
  desc: string;
}
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  name: "Hello",
  region: "",
  count: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});

const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

// 上传图片

import type { UploadFile } from "element-plus";

const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);

const handleRemove = (file: UploadFile) => {
  console.log(file);
};

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};

const handleDownload = (file: UploadFile) => {
  console.log(file);
};

// 开关
const value2 = ref(true);

// 文本框
const textarea = ref("");
</script>
<style>
/* 图片上传大小修改 */
.el-upload--picture-card {
  --el-upload-picture-card-size: 100px !important;
}
/* 文本框样式 */
.el-textarea__inner {
  width: 603px;
  height: 120px;
  background: #ffffff;
  border: 1px solid #dcdfe5;
  opacity: 1;
  border-radius: 4px;
}
</style>
<style lang="scss" scoped>
.introduce {
  // width: 1610px;
  //   height: 930px;
  background: #ffffff;
  opacity: 1;
  border-radius: 0px;
  margin-left: 10px;
  overflow: hidden;
  .home {
    margin: 40px 40px 0;
  }
}

.text {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: #abb3c3;
  opacity: 1;
}

.footer {
  // width: 1610px;
  height: 80px;
  background: #ffffff;
  box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.04);
  border-radius: 0px;
  display: flex;
  justify-content: center;
  // margin-top: 218px;
  padding-top: 20px;
  margin: 388px 0 0 -45px;
}

.ml10 {
  color: #abb3c3;

  font-size: 12px;
}
</style>
